    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab栏切换</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box ul{
                list-style: none;
            }
            .box{
                width: 1000px;
                height: 514px;
                border: 1px solid #8dd1f0;
                margin: 100px auto;

            }
            .box ul{
                height:35px;
                width: 320px;
            }
            .box ul li{
                float: left;
                height:35px;
                line-height: 35px;
                text-align: center;
                font-size: 16px;
                border-top:4px solid #ffffff;
                width: 80px;
                position: relative;
                cursor: pointer;
            }
            .box ul span{
                position: absolute;
                height: 20px;
                background: #999999;
                width: 1px;
                overflow: hidden;
                top: 10px;
                right: 0;
            }
            .content div{
                height: 475px;
                width: 1000px;
                border-top:1px solid #8dd1f0; ;
                /*border: 1px solid #8dd1f0;*/
            }
            .main{
                display: none;

            }
            .selected{
                display: block;
            }
           .box li.active{ /*li.active表示,该类对li生效*/
                border-color: crimson;
            }
        </style>
        <script src="../jquery-3.4.1.js"></script>
        <script>
            window.onload=function () {
                    $(function () {
                        $('.box ul li').click(function () {
                                // alert("1111");
                            $(this).addClass('active').siblings('li').removeClass('active');
                            $('.content>div').eq($(this).index()).addClass('selected').siblings('div').removeClass('selected')

                        })
                    })
            }
        </script>
    </head>
    <body>
    <div class="box">
        <ul>
            <li class="active">
                女士护理
            <span>◆</span>
            </li>
            <li>
                儿童护理
                <span>◆</span>
            </li>
            <li>
                男士护理
                <span>◆</span>
            </li>
        </ul>

    <div class="content">
        <div class="main selected ">
                <a href="#"><img src="imgs/guojidapai.jpg" alt=""></a>
            </div>
        <div class="main">
            <a href="#"><img src="imgs/guozhuangmingpin.jpg" alt=""></a>
            </div>
        <div class="main">
            <a href="#"><img src="imgs/qingjieyongpin.jpg" alt=""></a>
            </div>
        </div>
    </div>
    </body>
    </html>